<template>
  <div>
    <h1>App 根组件 -- {{ color }}</h1>
    <button @click="color='blue'">toggle</button>
    <hr />

    <level-two></level-two>
  </div>
</template>

<script>
import LevelTwo from './LevelTwo.vue'
import {computed} from 'vue'

export default {
  name: 'MyApp',
  data() {
    return {
      color: 'red',
    }
  },
  provide(){
    // 返回要共享的数据对象
    return{
      // 返回相应式数据
      color:computed(()=>this.color),
      count:1
    }
  },
  components: {
    LevelTwo,
  },
}
</script>

<style lang="less" scoped></style>
